.my-loader {
  position: fixed;
  right: 2.5%;
  top: 115px;
  --size-cube: 40px;
  width: var(--size-cube);
  height: var(--size-cube);
  perspective: 1000px;
  z-index: 1000;
  animation: floatAnimation 3s infinite ease-in-out;

  &:hover{
    animation-play-state: paused;
  }
/*  margin: calc(var(--size-cube) / 2) auto;*/

  & .face{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
  }

  &  .cube {
    width: calc(100% / 3);
    height: calc(100% / 3);
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 20%;
  }

  & .face.front {
    transform: translateZ(calc(var(--size-cube) / 2));
  }

  & .face.back {
    transform: translateZ(calc(var(--size-cube) / -2));
  }
  & .face.left {
    transform: rotateY(90deg) translateZ(calc(var(--size-cube) / -2));
  }

  & .face.right {
    transform: rotateY(90deg) translateZ(calc(var(--size-cube) / 2));
  }

  & .face.top {
    transform: rotateX(90deg) translateZ(calc(var(--size-cube) / 2));
  }

  & .face.bottom {
    transform: rotateX(90deg) translateZ(calc(var(--size-cube) / -2));
  }

}

.rubiks-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation:  my-rotateCube 15s infinite linear;
/*  animation-delay: 1s;*/

/*  box-shadow: 0px 3px 5px white;*/

  &:hover{
    animation-play-state: paused;
  }
}





@keyframes my-rotateCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg)  ;
  }
}


@media (max-width      : 1400px){
  .click-me{
    left: 10%;
  }
  .my-loader {
/*    --size-cube: 100px;*/
  }



}
@media (max-width      : 500px){
  .click-me{
    left: 3%;
  }
  .click-me p{

/*    font-size: 10px;*/
  }
}